import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, List, WingBlank, Card, Button } from 'antd-mobile'
import TitleNavBar from '@/common/components/displays/TitleNavBar'
import { Link } from 'react-router-dom'

import '@/common/style/ui.less'
import '@/common/style/appliesCom.less'

const Item = List.Item;
const Brief = Item.Brief;
class Talant extends Component {
    constructor(props){
        super(props)
        this.state = {
            titleData : {
                title: "Back",
                centerTitle: "Talent Apply",
                rightTitle: ""
            },
            itemData : [
                {
                    id: 1,
                    name: "TelanName",
                    time: "2 weeks",
                    extraData: "",
                    thumb: "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                },
                {
                    id: 2,
                    name: "TelanName",
                    time: "2 weeks",
                    extraData: "",
                    thumb: "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                }
            ]
        }
    }
    linkHandle(){
        this.props.history.push("/appliesComapply");
    }
    render() {
        return (
            <div className="applies-container">
                <TitleNavBar titleData={this.state.titleData} Drawerstatus={false}/>
                <WhiteSpace/>
                <WingBlank>
                    <span className="date-tip">Applies</span>
                    <Link to={'/'} className="reward-link">History</Link>
                </WingBlank>
                <WhiteSpace/>
                <Card className="cardContent">
                    <Card.Header
                        title="This is title"
                        thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                        extra={<span>Status</span>}
                    />
                </Card>
                <List className="my-list">
                {
                    this.state.itemData.map((item)=>
                        <Item
                            key={item.id}
                            extra={item.extraData}
                            arrow="horizontal"
                            thumb={item.thumb}
                            multipleLine
                            onClick={() => {this.linkHandle()}}
                        >
                            {item.name}<Brief>{item.time}</Brief>
                        </Item>
                    )
                }
                </List>
                <Card className="cardFooter">
                    <Card.Header
                        title="All(10)"
                        thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                        extra={<div><span>No</span><span className="confirm-btn">Confirm</span></div>}
                    />
                </Card>
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {

    }
}

export default connect(mapStateToProps)(Talant);
